<template>
  <el-button @click="showModal = true">添加</el-button>
  <el-button @click="deleteDiv">删除</el-button>
  <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="机构创建时间" sortable width="180" />
    <el-table-column prop="name" label="机构名称" width="180" column-key="name" :filters=title
      :filter-method="filterHandler" />
    <el-table-column prop="simple" label="机构简称" :formatter="formatter" />

    <el-table-column prop="tag" label="类型" width="100" :filters="[
      { text: '外包', value: '外包' },
      { text: '自研', value: '自研' },
    ]" :filter-method="filterTag" filter-placement="bottom-end">
    
      <template #default="scope">
        <el-tag :type="scope.row.tag === 'Home' ? '' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="showModal1 = true"
        >
          修改
        </el-button>
      </template>
    </el-table-column>

  </el-table>
  <!-- 模态框 -->
  <div>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <el-form :model="form" label-width="120px">
          <el-form-item label="机构名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="机构类型">
            <el-select v-model="form.tag" placeholder="选择机构类型">
              <el-option label="自研" value="自研" />
              <el-option label="外包" value="外包" />
            </el-select>
          </el-form-item>
          <el-form-item label="机构简称">
            <el-input v-model="form.simple" />
          </el-form-item>
          <el-form-item label="机构创建时间">
            <el-col :span="11">
              <el-date-picker v-model="form.date" type="date" placeholder="Pick a date" style="width: 100%" value-format="YYYY-MM-DD"/>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAddItem">Create</el-button>
            <el-button @click="showModal = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!-- 修改模态框 -->
  <div>
    <div v-if="showModal1" class="modal">
      <div class="modal-content">
        <el-form :model="form" label-width="120px">
          <el-form-item label="机构名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="机构类型">
            <el-select v-model="form.tag" placeholder="选择机构类型">
              <el-option label="自研" value="自研" />
              <el-option label="外包" value="外包" />
            </el-select>
          </el-form-item>
          <el-form-item label="机构简称">
            <el-input v-model="form.simple" />
          </el-form-item>
          <el-form-item label="机构创建时间">
            <el-col :span="11">
              <el-date-picker v-model="form.date" type="date" placeholder="Pick a date" style="width: 100%" value-format="YYYY-MM-DD"/>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onupmanItem">Update</el-button>
            <el-button @click="showModal1 = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { number } from 'echarts';
import { ref, reactive } from 'vue'
// import type { TableColumnCtx, TableInstance } from 'element-plus'

// interface User {
//   date: string
//   name: string
//   simple: string
//   tag: string
// }
const form = reactive({
  name: '',
  tag:'',
  simple:'',
  date:''
})


const now = new Date()
let showModal = ref(false)
let showModal1 = ref(false)
const title = [
  { text: 'Tom1', value: 'Tom1' },
  { text: 'Tom2', value: 'Tom2' },
  { text: 'Tom3', value: 'Tom3' },
  { text: 'Tom4', value: 'Tom4' },
]
const tableRef = ref()

const resetDateFilter = () => {
  tableRef.value.clearFilter(['date'])
}
// TODO: improvement typing when refactor table
const clearFilter = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  tableRef.value.clearFilter()
}
const formatter = (row, column) => {
  return row.simple
}
const filterTag = (value, row) => {
  return row.tag === value
}
const filterHandler = (
  value,
  row,
  column
) => {
  const property = column['property']
  return row[property] === value
}

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom1',
    simple: 'T1',
    tag: '外包',
    none1:'修改'
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    simple: 'T2',
    tag: '自研',
    none1:'修改'
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    simple: 'T3',
    tag: '外包',
    none1:'修改'
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    simple: 'T4',
    tag: '自研',
    none1:'修改'
  },
])
const deleteDiv = () => {
  const sum = prompt('删除的机构的项数是')
  console.log(Number(sum))
  if (sum == false) {
    return
  }
  if (Number(sum) === 'NaN' || sum - 1 < 0 ||sum - 1 > tableData.value.length) {
    alert('请输入正确的项数')
    return
  }else{
    tableData.value.splice(sum - 1, 1)
  }
  
  
}
const onAddItem = () => {
  if (form.tag === '' || form.date === '' || form.name === '' || form.simple === '') {
    alert('输入内容')
    return
  }
  tableData.value.push({
    name: form.name,
    date:form.date,
    simple:form.simple,
    tag:form.tag
  })
  showModal.value = false
  form.name = '',
  form.date='',
  form.simple='',
  form.tag=''
}
const onupmanItem = (index) => {
  tableData.value.splice(index, 1, {
    name: form.name,
    date:form.date,
    simple:form.simple,
    tag:form.tag
  })
  showModal1.value = false
  form.name = '',
  form.date='',
  form.simple='',
  form.tag=''

}
</script>

<style scoped>
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
